<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>mdui list</title>
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<meta content="telephone=no,email=no" name="format-detection">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../statics/mdui/css/mdui.min.css">
		<script type="text/javascript" src="../statics/common/js/header.js"></script>
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<div class="mdui-content">
			<ul id="list" class="mdui-table-view mdui-table-view-chevron">
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/accordion.html">
						accordion（折叠面板）
					</a>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a class="mdui-navigate-right" href="#">
						actionsheet（操作表）
					</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/actionsheet.html">
								H5模式actionsheet
							</a>
						</li>
						<li class="mdui-table-view-cell mdui-plus-visible">
							<a class="mdui-navigate-right" href="examples/actionsheet-plus.html">
								原生模式actionsheet
							</a>
						</li>
					</ul>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/badges.html">
						badge（数字角标）
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/ajax.html">
						ajax
					</a>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a class="mdui-navigate-right" href="#">
						button（按钮）
					</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/buttons.html">
								普通按钮
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/buttons-with-icons.html">
								带图标的按钮
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/buttons-with-badges.html">
								带数字的按钮
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/buttons-with-block.html">
								块级按钮
							</a>
						</li>
					</ul>

				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/card.html">
						cardview（卡片视图）
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/checkbox.html">
						checkbox（复选框）
					</a>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a class="mdui-navigate-right" href="#">
						date time（日期时间）
					</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/dtpicker.html">
								H5模式
							</a>
						</li>
					</ul>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/dialog.html">
						dialog（消息框）
					</a>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a class="mdui-navigate-right" href="#">
						gallery slider（图片轮播）
					</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/slider-default.html">
								默认样式

							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/slider-with-title.html">
								下方悬浮标题

							</a>
						</li>
					</ul>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a class="mdui-navigate-right" href="#">
						gallery table（图文表格）
					</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/slider-table-default.html">
								默认样式
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/slider-table-pagination.html">
								左右滑动分页样式
							</a>
						</li>
					</ul>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a class="mdui-navigate-right" href="#">
						grid（9宫格）
					</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/grid-default.html">
								默认样式
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/grid-pagination.html">
								可左右滑动的9宫导航
							</a>
						</li>
					</ul>
				</li>

				<li class="mdui-table-view-cell mdui-collapse">
					<a href="#" class="mdui-navigate-right">icon（图标）</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" open-type="common" href="examples/icons.html">
								内置图标
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" open-type="common" href="examples/icons-extra.html">
								扩展图标
							</a>
						</li>
					</ul>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/input.html">
						input（输入框）
					</a>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a class="mdui-navigate-right" href="#">
						list（列表）
					</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/tableviews.html">
								普通列表
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/tableviews-with-badges.html">
								右侧带数字角标
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/list-with-input.html">
								列表带input类控件
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/list-triplex-row.html">
								三行列表
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/tableviews-with-collapses.html">
								二级列表
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/tableviews-with-swipe.html">
								滑动触发列表项菜单
							</a>
						</li>
					</ul>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/media-list.html">
						media list（图文列表）
					</a>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a href="#" class="mdui-navigate-right">nav bar（导航栏）</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" open-type="common" href="examples/nav.html">
								默认实现
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" open-type="common" href="examples/nav_transparent.html">
								透明渐变
							</a>
						</li>
					</ul>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/numbox.html">
						number box（数字输入框）
					</a>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a class="mdui-navigate-right" href="#">
						off canvas（侧滑导航）
					</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" open-type="common" href="examples/offcanvas-drag-right.html">
								div模式右滑菜单
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" open-type="common" href="examples/offcanvas-drag-left.html">
								div模式左滑菜单
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" open-type="common" href="examples/offcanvas-drag-down.html">
								div模式下拉菜单
							</a>
						</li>
					</ul>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/pagination.html">
						pagination（分页）
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/picker.html">
						picker（选择器） 
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/popovers.html">
						popover（弹出菜单）
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/progressbar.html">
						progress bar（进度条）
					</a>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a href="#" class="mdui-navigate-right">pull to refresh（下拉刷新和上拉加载更多）</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" open-type="common" href="examples/pullrefresh_sub.html">
								默认实现
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" open-type="common" href="examples/pullrefresh_with_tab.html">
								选项卡切换+下拉刷新
							</a>
						</li>
					</ul>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/radio.html">
						radio（单选框）
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/range.html">
						range（滑块）
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/switches.html">
						switch（开关）
					</a>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a class="mdui-navigate-right" href="#">
						tab bar（选项卡）
					</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/tabbar.html">
								底部选项卡-div模式
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/tabbar-labels-only.html">
								底部选项卡-文字选项卡
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/tabbar-with-submenus.html">
								底部选项卡-二级菜单(div)
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/tab-with-segmented-control.html">
								顶部选项卡-div模式
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
								顶部选项卡-可左右拖动(div)
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/tab-with-segmented-control-vertical.html">
								左侧选项卡-div模式
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" href="examples/tab-vertical-scroll.html">
								左侧选项卡-div模式-滚动监听
							</a>
						</li>
					</ul>
				</li>

				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/typography.html">
						typography（文字）
					</a>
				</li>
				
				<li class="mdui-table-view-divider">模板</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/im-chat.html">
						chat（聊天窗口） 
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" open-type="common" href="examples/beecloud.html">
						cloud Pay（云端支付）
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" open-type="common" href="examples/feedback.html">
						feedback（问题反馈） 
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" open-type="common" href="examples/imageviewer.html">
						image viewer（图片预览）
					</a>
				</li>
				<li class="mdui-table-view-cell mdui-collapse">
					<a class="mdui-navigate-right" href="#">
						indexed list（索引列表）
					</a>
					<ul class="mdui-table-view mdui-table-view-chevron">
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" open-type = "common" href="examples/indexed-list.html">
								展示模式
							</a>
						</li>
						<li class="mdui-table-view-cell">
							<a class="mdui-navigate-right" open-type = "common" href="examples/indexed-list-select.html">
								选择模式
							</a>
						</li>
					</ul>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/lazyload-image.html">
						lazyload（懒加载） 
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/locker-dom.html">
						locker（手势图案锁屏） 
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" href="examples/login.html">
						login（登录） 
					</a>
				</li>
				<li class="mdui-table-view-cell">
					<a class="mdui-navigate-right" open-type="common" href="examples/setting.html">
						setting（设置）- div窗体切换示例
					</a>
				</li>
			</ul>
			
		</div>
		<script src="../statics/mdui/js/mdui.min.js"></script>
		<script src="../statics/common/js/mdlife.js"></script>
		<script>
			var aniShow = "pop-in";
			//主列表点击事件
			mdui('#list').on('tap', 'a', function() {
				var id = this.getAttribute('href');
				var href = this.href;
				var type = this.getAttribute("open-type");
				
				var title = this.text || "mdlife";
				title = title.replace(/(^\s*)|(\s*$)/g,'');
				//不使用父子模板方案的页面
				if (type == "common") {
					var webview_style = {
						popGesture: "close"
					};
					//侧滑菜单需动态控制一下zindex值；
					if (~id.indexOf('offcanvas-')) {
						webview_style.zindex = 9998;
						webview_style.popGesture = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
					}
					//图标界面需要启动硬件加速
					if(~id.indexOf('icons.html')){
						webview_style.hardwareAccelerated = true;
					}
					if(Base.isPC() === true) {
						mdui.openWindow({
							id: id,
							url: this.href,
							styles: webview_style,
							show: {
								aniShow: aniShow
							},
							waiting: {
								autoShow: false
							}
						});
					} else {
						var name = id.substring(id.indexOf("/") + 1, id.indexOf("."));
						md.openWin({
						    name: name,
						    url: 'wgt://mdui/' + 'list_navi.html',
						    pageParam: {
						        name: name + "_frame",
						        title: title,
						        url: 'wgt://mdui/' + id
						    }
						});
					}
				} else if (id && ~id.indexOf('.html')) {
					if (!mdui.os.plus || (!~id.indexOf('popovers.html')&&mdui.os.ios)) {
						if(Base.isPC() === true) {
							mdui.openWindow({
								id: id,
								url: this.href,
								styles: {
									popGesture: 'close'
								},
								show: {
									aniShow: aniShow
								},
								waiting: {
									autoShow: false
								}
							});
						} else {
							var name = id.substring(id.indexOf("/") + 1, id.indexOf("."));
							md.openWin({
							    name: name,
							    url: 'wgt://mdui/' + 'list_navi.html',
							    pageParam: {
							        name: name + "_frame",
							        title: title,
							        url: 'wgt://mdui/' + id
							    }
							});
						}
					}
				} else {
					//alert("MDLIFE");
				}
				
			});
		</script>
	</body>

</html>
